import { RootState } from '@/store'
import { useSelector } from 'react-redux'
import ArticleList from './components/ArticleList'
import ArticleMark from './components/ArticleMark'
import Channel from './components/Channel'
import style from './index.module.scss'

export default function Home() {
  const { list, activeId } = useSelector((state: RootState) => state.channel)
  console.log(7, list, activeId)

  return (
    <div className={style.root}>
      <Channel></Channel>
      {list.map((item) => (
        <div
          key={item.id}
          className="channel-list"
          hidden={item.id !== activeId}
        >
          <ArticleList channel_id={item.id}></ArticleList>
        </div>
      ))}
      {/* 标记文章的组件 - 不感兴趣 举报 */}
      <ArticleMark />
    </div>
  )
}
